<template>
  <div class="accountList-box">
    <AppTitle title="账号列表"></AppTitle>
    <div class="accountList-table">
      <el-table :data="tableData" style="width: 100%" ref="multipleTable">
        <!-- 批量删除 -->
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column label="用户组" prop="userGroup"></el-table-column>
        <el-table-column label="时间">
          <template #default="scope">
            <span>{{formatTime(scope.row.ctime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" @click="batchRemove">批量删除</el-button>
    <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
    <div class="demo-pagination-block">
      <!-- <div class="demonstration">分页器</div> -->
      <el-pagination
        v-model:current-page="formData.currentPage"
        v-model:page-size="formData.pageSize"
        :page-sizes="[5, 10, 20, 50,100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- editShow编辑框显隐 -->
  <el-dialog v-model="editShow" title="修改账号信息" width="500">
    <el-form :model="ediForm">
      <el-form-item label="账号名">
        <el-input v-model="ediForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="用户组">
        <el-select v-model="ediForm.userGroup" placeholder="请选择用户组">
          <el-option label="超级管理员" value="超级管理员" />
          <el-option label="普通管理员" value="普通管理员" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editbtn">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { accountList, accountDel, accountEdit, accountBatchDel } from '@/api/account'
import AppTitle from '../../components/AppTitle.vue';

const tableData = ref([]);
const total = ref(0);
const editShow = ref(false);
const formData = reactive({
  currentPage: 1,
  pageSize: 5
})
const ediForm = reactive({
  id: '',
  account: '',
  userGroup: ''
})
const multipleTable = ref(null); // 用于获取选中行的表格引用

// 当前页条数改变就会从新请求
const handleSizeChange = (val) => {
  // 因为前面数据用了双向绑定，可省略
  // formData.pageSize = val;
  getAccountList()
}

// 当前页改变就会从新请求
const handleCurrentChange = (val) => {
  getAccountList()
}

// 账号列表请求
const getAccountList = async () => {
  const res = await accountList(formData);
  console.log(res);
  tableData.value = res.data;
  total.value = res.total;
}
getAccountList();

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
}

// 删除
const handleDelete = async (id) => {
  let res = await accountDel({ id });
  console.log(res);
  if (res.code == 0) {
    // 重新请求
    getAccountList();
    ElMessage.success(res.msg);
  } else {
    ElMessage.error(res.msg);
  }
}

// 编辑
const handleEdit = (row) => {
  editShow.value = true;
  ediForm.id = row.id;
  ediForm.account = row.account;
  ediForm.userGroup = row.userGroup;
}

// 确认编辑
const editbtn = async () => {
  let res = await accountEdit(ediForm);
  console.log(res);
  if (res.code == 0) {
    // 重新请求
    editShow.value = false;
    ElMessage.success(res.msg);
    getAccountList();
  } else {
    ElMessage.error(res.msg);
  }
}

// 批量删除
const batchRemove = async () => {
  const selection = multipleTable.value?.getSelectionRows(); // 获取选中的行数据
  if (selection.length === 0) {
    ElMessage.warning('请选择要删除的账号');
    return;
  }
  let ids = selection.map(row => row.id); // 提取选中行的ID数组
  console.log(ids);
  ids = JSON.stringify(ids);
  const res = await accountBatchDel({ids}); // 调用批量删除接口
  console.log(res);
  if (res.code === 0) {
    ElMessage.success(res.msg);
    getAccountList(); // 重新请求数据
  } else {
    ElMessage.error(res.msg);
  }
}

// 取消选择
const toggleSelection = () => {
  multipleTable.value?.clearSelection();
}
</script>

<style lang="scss" scoped>
.accountList-box {
  width: 100%;
  height: 100%;
  // overflow: hidden;
 .accountList-table {
    padding: 15px;
  }
 .demo-pagination-block {
    margin: 15px 0 0 0;
    padding-left: 15px;
  }
}
</style>